<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="static/css/indextest.css">
    <link rel="icon" href="static/img/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="static/img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="static/css/all.min.css">
    <title>文件目录浏览器</title>
    <link rel="stylesheet" href="static/css/fileExpor.css">

    <style>
        .version-info {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
        }
        .info-item {
            margin: 10px 0;
            font-size: 16px;
        }
        .info-item label {
            color: #3498db;
            font-weight: bold;
            margin-right: 15px;
            min-width: 80px;
            display: inline-block;
        }
    </style>
    
</head>

<body>
    <div class="version-info">
        <div class="info-item">
            <label>软件名:</label>
            <span id="version-name"></span>
        </div>
        <div class="info-item">
            <label>版本号:</label>
            <span id="version-number"></span>
        </div>
        <div class="info-item">
            <label>创建时间:</label>
            <span id="version-date"></span>
        </div>
        <div class="info-item">
            <label>创建人:</label>
            <span id="version-creator"></span>
        </div>
        <div class="info-item">
            <label>ID:</label>
            <span id="version-id"></span>
        </div>
    </div>
    
    <main class="content">
        <!-- 新增的路径显示栏 -->
        <div class="path-display">
            <label for="current-path" class="path-label">当前路径：</label>
            <input type="text" id="current-path" class="path-input" readonly value="/FileList/CJsonObject-master">
        </div>
        <table class="file-table">
            <!-- 表头 -->
            <thead class="table-header">
                <tr>
                    <th class="checkbox-column">
                        <input type="checkbox" class="bulk-select" id="selectAll">
                        <label for="selectAll">全选</label>
                    </th>
                    <th class="filename-column">文件名</th>
                    <th class="action-column-del">删除</th>
                    <th class="action-column-rename">重命名</th>
                </tr>
            </thead>

            <!-- 文件列表 -->
            <tbody id="file-list-body">
                <!-- 动态内容将插入此处 -->
            </tbody>
        </table>
        <div id="nav-bar">
            <button id="upload-btn" onclick="uploadFile()" style="display:block;">上传文件</button>
            <button id="upload-btn" onclick="uploadEntrieDir()" style="display:block;">上传整个文件目录</button>
            <button id="download-btn" onclick="OnDownloadByList()" style="display:block;">下载</button>
            <button id="delete-btn" onclick="OnDeleteFileList()" style="display:block;">删除</button>
        </div>
        <div class="spacer"></div> <!-- 新增的间隔控件 -->
    </main>

    <!-- 弹窗容器 -->
    <div id="upload-modal" class="modal">
        <div class="modal-tip">
            <h3>文件上传队列（<span id="active-uploads">0</span>）</h3>
        </div>
        <div class="modal-content">
            <div id="upload-list"></div>
        </div>
        <div class="modal-actions">
            <button id="cancel-all-button" onclick="OnCancelAll()" class="cancel-button">
                ⛔ 取消所有上传
            </button>
        </div>
    </div>    
    <script src="/static/js/auth.js"></script>
    <script src="/static/js/fileExplor.js"></script>
</body>

</html>